﻿
@{
    ViewBag.Title = "Mobile";
}
<style>
    .login-screen-content {
        position: relative;
    }

    .space {
        width: 100%;
        height: 200px;
    }

    .image {
        width: 100%;
        height: 270px;
        background: url("/imgs/account-bg.jpg") #007aff;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
        position: absolute;
        z-index: -10;
        top: 0;
    }

    .login-box {
        width: 80%;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: rgba(0,0,0,0.6) 3px 5px 10px;
    }
</style>
<div class="page no-navbar no-toolbar no-swipeback" data-page="login-mobile">
    <div class="page-content login-screen-content">
        <div class="image"></div>
        <div class="space"></div>
        <div class="login-box">
            <div class="block">
                <p class="segmented segmented-raised">
                    <a class="button external" href="@Url.Action("Login","Home")">用户名密码登录</a>
                    <a class="button button-active">手机号密码登录</a>
                </p>
            </div>
            <div class="list">
                <ul>
                    <li class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">手机号</div>
                            <div class="item-input">
                                <input type="text" PlaceHolder="请输入手机号" name="mobile" />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label">密码</div>
                            <div class="item-input">
                                <input type="password" PlaceHolder="请输入密码" name="password" />
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="block">
                <div class="list">
                    <ul>
                        <li>
                            <input id="btnRegister" type="submit" class="button button-fill button-large button-round" value="立即登录">
                        </li>
                    </ul>
                    <div class="block-footer">
                        <p>登录即代表您同意《用户服务协议》</p>
                        <p>
                            没有账号？<a href="@Url.Action("Register","Home")" class="close-login-screen external">现在注册</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section footScript{
    <script>
        $(function () {
            $("#formMain").attr("action", "@Url.Action("SubmitMobile", "Home")");
            $("#formMain").attr("method", "post");

            $("#formMain").validate({
                rules: {
                    mobile: {
                        required: true                    },
                    password: {
                        required: true                    }
                },

                messages: {
                    mobile: {
                        required: "手机号不能为空",
                    },
                    password: {
                        required: "密码不能为空"
                    }
                },

                //提交表单
                submitHandler: function (form) {
                    //使用ajax方式提交表单
                    $(form).ajaxSubmit({
                        success: function (data) {
                            //State=0成功
                            if (data.StatusCode == 0) {
                                 location.href = "@Url.Action("Index","Home")";
                            } else {
                                layer.msg(data.Message, { icon: 2 });
                            }
                        }
                    });
                }
            });
        });
    </script>
}

